<template>
  <section class="wrap">
    <el-form ref="ruleForm" :model="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="游戏平台" prop="type">
        <el-select style="width: 100%;" v-model="ruleForm.type" placeholder="请选择游戏平台">
          <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="游戏名称" prop="gameName">
        <el-input v-model="ruleForm.gameName" />
      </el-form-item>
      <el-form-item label="游戏图片" prop="img">
        <el-upload class="avatar-uploader" :limit="1" name="file" :action="uploadUrl" :show-file-list="false"
          :on-success="handleUploadSuccess">
          <img v-if="ruleForm.img" width="80" height="80" :src="ruleForm.img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>

      <!-- <el-form-item label="结算周期" prop="dayas">
        <el-input v-model="ruleForm.days" />
      </el-form-item>
      <el-form-item label="订单金额" prop="price">
        <el-input v-model="ruleForm.price" type="number"/>
      </el-form-item> -->

      <el-form-item>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary" :loading="submitting" @click="create">立即更新</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import { hostURL } from '@/plugins/utils/config'
import gameApi from '@/plugins/api/game.js'

export default {
  name: 'UserCreate',
  data() {
    return {
      token: '',
      userList: [],
      option: [
        {
          label: '端游',
          value: 1
        },
        {
          label: '手游',
          value: 2
        },
      ],
      listLoading: false, // 添加缺失的变量
      submitting: false, // 提交状态
      uploadUrl: hostURL + '/upload',
      ruleForm: {
        gameName: '',
        type: null,
        img: ''
      },
    }
  },
  mounted() {
    this.getGame()
  },
  methods: {

    getGame() {
      this.ruleForm = JSON.parse(localStorage.getItem('game'))
    },

    // 上传图片成功回调
    handleUploadSuccess(res) {
      console.log(res);

      if (res.code === 200) {
        this.ruleForm.img = `${hostURL}/uploads/${res.data}` // 修正字段名
        this.$message.success('上传成功!')
      } else {
        this.$message.error(res.message || '上传失败')
      }
    },


    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          await this.create()
        } else {
          this.$message.warning('请填写完整表单信息')
          return false
        }
      })
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 更新用户
    async create() {
      console.log(this.ruleForm);

      this.submitting = true
      try {
        const res = await gameApi.modify(this.ruleForm)
        if (res.code === 200) {
          await this.$confirm('更新成功，是否退出更新游戏页面', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success'
          })
          this.$router.push('/game/index')
        } else {
          this.$message.error(res.message || '更新失败')
        }
      } catch (err) {
        console.error('更新游戏失败:', err)
        this.$message.error(err.message || '更新游戏失败')
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  box-sizing: border-box;
  margin: 24px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>